<template>
  <div class="top">
    <el-row>
      <el-col :span="8">
        <p>
          <img :src="systemObj.systemLogo" width="50" alt="logo" />
          <span>{{ systemObj.systemTitle }}</span>
        </p>
      </el-col>
      <el-col :span="16">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="transparent"
          text-color="#fff"
          active-text-color="#fff"
          style="float: right"
        >
          <el-menu-item index="/site"
            ><img src="../assets/icon/zdfb.png" alt="" />&nbsp;
            <span slot="title">站点分布</span></el-menu-item
          >
          <el-menu-item index="/realData"
            ><img src="../assets/icon/sssj.png" alt="" />&nbsp;
            <span slot="title">实时数据</span></el-menu-item
          >
          <el-menu-item index="/dataAnalysis"
            ><img src="../assets/icon/d.png" alt="" />&nbsp;
            <span slot="title">数据分析</span></el-menu-item
          >
          <el-menu-item index="/contrastiveAnalysis"
            ><img src="../assets/icon/dbfx.png" alt="" />&nbsp;
            <span slot="title">对比分析</span></el-menu-item
          >
          <el-menu-item index="/riskAnalysis"
            ><img src="../assets/icon/fxfx.png" alt="" />&nbsp;
            <span slot="title">风险分析</span></el-menu-item
          >
          <el-menu-item index="/dataStatistics"
            ><img src="../assets/icon/sjtj.png" alt="" />&nbsp;
            <span slot="title">数据统计</span></el-menu-item
          >
          <el-menu-item index="/warningManagement" 
            ><img src="../assets/icon/yjgl.png" alt="" />&nbsp;
            <span slot="title">预警管理</span></el-menu-item
          >
          <el-menu-item index="/waringLog"
            ><img src="../assets/icon/yjrz.png" alt="" />&nbsp;
            <span slot="title">预警日志</span></el-menu-item
          >
          <el-menu-item index="/systemManagement" v-if="show"
            ><img src="../assets/icon/xtgl.png" alt="" />&nbsp;
            <span slot="title">系统管理</span></el-menu-item
          >
          <el-submenu index="/login">
            <template slot="title"
              ><img src="../assets/icon/gly.png" alt="" />&nbsp;
              <span slot="title">{{ userName }}</span></template
            >
            <el-menu-item index="/changePwd">修改密码</el-menu-item>
            <el-menu-item index="/login">退出</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState } from "vuex";
import * as serviceApi from "../common/service.config";
import Axios from "axios";
Axios.defaults.withcredentials = true;
export default {
  name: "topHead",
  components: {},
  props: {},
  data() {
    return {
      systemObj: {
        systemLogo: null,
        systemTitle: null,
      },
      activeIndex: null,
      userName: null,
      show: true,
    };
  },
  methods: {
    handleSelect(key) {
      if (key === "/site") {
        this.$router.push(`${key}?id=${this.navId}`);
      } else if (key === "/login") {
        sessionStorage.removeItem("token");
        this.$router.push(key);
      } else {
        this.$router.push(key);
      }
    },
  },
  computed: {
    ...mapState(["navId"]),
  },
  watch: {},
  created() {
    let projectInfo = window.localStorage.getItem("projectInfo");
    projectInfo = JSON.parse(projectInfo);
    this.systemObj.systemLogo =
      serviceApi.URL_IMAGE_VIEW + projectInfo.systemLogo;
    this.systemObj.systemTitle = projectInfo.systemTitle;
    let path = this.$route.path;
    if (path.includes("/systemManagement")) path = "/systemManagement";
    this.activeIndex = path;
    this.userName = sessionStorage.getItem("token");
    Axios({
      url: serviceApi.KB_API,
      method: "post",
      data: `appMsg={"parameter":"\\"\\"","serviceCode":"listMenuInfo","timestamp":"","uuid":""}`,
    }).then((res) => {
      if (res.data.parameter.list.length == 9) {
        this.show = false;
      }
    });
  },
};
</script>

<style lang='less' scoped>
.top {
  position: absolute;
  top: 0;
  height: 6.4% !important;
  width: 100%;
  background: rgba(36, 37, 36, 0.83);
  /* border: 1px solid red; */
}
.el-col p {
  clear: both;
  img {
    margin-left: 10px;
    margin-top: 10px;
    float: left;
  }
  span {
    font-size: 35px;
    font-weight: bold;
    letter-spacing: 2px;
    color: lightblue;
    margin-top: 10px;
    margin-left: 5px;
    float: left;
    background-image: -webkit-linear-gradient(
      bottom,
      #89bbf9,
      #91dbfc,
      #8ce5ea
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.el-menu.el-menu--horizontal {
  border: none;
}
.el-menu-item {
  font-size: 14px;
}
.el-menu-item:hover {
  background: linear-gradient(
    to top,
    rgb(78, 161, 255),
    transparent
  ) !important;
}
.el-menu-item.is-active {
  background: linear-gradient(
    to top,
    rgb(78, 161, 255),
    transparent
  ) !important;
}
.el-submenu /deep/ .el-submenu__title:hover {
  background: linear-gradient(
    to top,
    rgb(78, 161, 255),
    transparent
  ) !important;
}
.el-menu--horizontal {
  ul li {
    background: rgba(36, 37, 36, 0.83) !important;
    text-align: center;
    margin-bottom: 5px;
  }
}
</style>